<template>
  <div>
    <div id="mars3dcontent"></div>

    <div class="linelist">
      <div class="search">
        <div>
          <span style="width: 130px">起点编号:</span>
          <el-input v-model="pipLineDefaultQuery.spoint"></el-input>
        </div>

        <div>
          <span style="width: 130px">管线编号:</span>
          <el-input v-model="pipLineDefaultQuery.expNo"></el-input>
        </div>
        <div>
          <span style="width: 130px">终点编号:</span>
          <el-input v-model="pipLineDefaultQuery.epoint"></el-input>
        </div>
        <el-button @click="clearPipPoint">清空</el-button>
        <el-button type="primary" @click="seachPipPoint">查询</el-button>
      </div>
      <div class="table">
        <el-table
          :data="pipLineTableData"
          style="width: 180%"
          @row-dblclick="selectPipRow"
        >
          <el-table-column prop="pipnumber" label="管线编号" width="180" />
          <el-table-column
            v-if="false"
            prop="gid"
            label="id"
            width="100"
          ></el-table-column>
          <el-table-column prop="piptype" label="管线类型" width="100" />
          <el-table-column prop="elevation" label="管线地面高程" />
          <el-table-column prop="depth" label="管线埋深" />
          <el-table-column prop="unit" label="权属单位" />
          <el-table-column prop="spoint" label="起始点编号" />
          <el-table-column prop="epoint" label="终止点编号" />
          <el-table-column prop="time" label="探测时间" />
          <el-table-column prop="handle" label="操作">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="handleClick">
                操作
              </el-button>
              <el-button link type="primary" size="small" @click="deleteRow(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="paginationContainer">
          <el-pagination
            v-show="total > 0"
            :total="total"
            :current-page="pipLineDefaultQuery.pageNum"
            :page-size="pipLineDefaultQuery.pageSize"
            @current-change="pagechange"
            @size-change="sizechange"
          />
        </div>
      </div>
    </div>
    <UpdatePipLine
      v-if="updatepipline"
      :row="rowinfo"
      @RefreshFee="closePanl"
    ></UpdatePipLine>
  </div>
</template>

<script setup>
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css"; //依赖的cesium库本身css
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";

import { mapOptions } from "@/utils/mapOptions";
import { destroyMap, transform, AddGraphic, LayerCreate, flytoView } from "@/utils/Lmap";
import {
  getPiepleLineList,
  getPiepleLineGeojson,
  deletePiepleLine,
} from "@/api/manager/manager";
import { addLayer } from "@/utils/layer";

import UpdatePipLine from "./UpdatePipLine.vue";

let map;
let pipLineDefaultQuery = reactive({
  epoint: "", // 终点编号
  expNo: "", // 管线编号
  spoint: "", // 起点编号
  pageNum: 1,
  pageSize: 3,
});
let pipLineTableData = ref([]);
let total = ref();
let graphiclayer;

let updatepipline = ref(false);
let rowinfo = ref();

onMounted(() => {
  map = new mars3d.Map("mars3dcontent", mapOptions);
  addLayer(map, "https://www.cqkckc.com/geoserver/hhgw/wms", "hhgw:pipe_line");
  graphiclayer = LayerCreate.createGraphicLayer(map);
});

onUnmounted(() => {
  destroyMap(map);
});

// 获取管线数据
function getLineTable() {
  initTable();
  getPiepleLineList(pipLineDefaultQuery).then((res) => {
    // arrunitc权属单位，管线编号scode,管线地面高程sh,管线埋深sdeep,探测时间sdata,管线类型dtype
    total.value = res.data.total;
    nextTick(() => {
      for (const eachdata of res.data.records) {
        let dataformate = {};
        dataformate.pipnumber = eachdata.expNo;
        dataformate.gid = eachdata.gid;
        dataformate.piptype = eachdata.dtype;
        dataformate.elevation = eachdata.sh;
        dataformate.unit = eachdata.arrunitc;
        dataformate.time = eachdata.sdate;
        dataformate.depth = eachdata.sdeep;
        dataformate.epoint = eachdata.epoint;
        dataformate.spoint = eachdata.spoint;
        pipLineTableData.value.push(dataformate);
      }
    });
  });
}

function initTable() {
  pipLineTableData.value = [];
}

function clearPipPoint() {
  pipLineDefaultQuery.epoint = "";
  pipLineDefaultQuery.expNo = "";
  pipLineDefaultQuery.pageNum = 1;
  pipLineDefaultQuery.pageSize = 3;
  pipLineDefaultQuery.spoint = "";
  getLineTable();
  graphiclayer.clear();
}

function seachPipPoint() {
  getLineTable();
}

function pagechange(page) {
  pipLineDefaultQuery.pageNum = page;
  getLineTable();
}

function sizechange() {
  console.log(pipLineDefaultQuery);
}

function selectPipRow(row) {
  getPiepleLineGeojson({ gid: row.gid }).then((res) => {
    console.log(res);
    if (res.code == 200) {
      let coordinates = res.data.geometry.coordinates;
      let attribute = res.data.properties;
      let transcoordinates = [];
      coordinates.forEach((el) => {
        transcoordinates.push(transform(el));
      });
      console.log(transcoordinates);
      let graphic = AddGraphic.addtransLine(graphiclayer, transcoordinates);

      const innerHtml = `<table style="width:280px;">
                <tr><th scope="col" colspan="4"  style="text-align:center;font-size:15px;">管线详细信息</th></tr>
                <tr><td >位置：</td><td >${attribute.address}</td></tr>
                <tr><td >所属单位:</td><td >${attribute.arrunitc}</td></tr>
                <tr><td >流域:</td><td >${attribute.basin}</td></tr>
                <tr><td >编号:</td><td >${attribute.expNo}</td></tr>
                <tr><td >海拔:</td><td >${attribute.sh}</td></tr>
                <tr><td >类型:</td><td >${attribute.code}</td></tr>
                <tr><td >井深:</td><td >${attribute.sdeep}</td></tr>
                <tr><td >检查人:</td><td >${attribute.sperson}</td></tr>
              </table>`;
      // 绑定Popup
      graphic
        .bindPopup(innerHtml, { offsetY: -30, closeOnClick: false, autoClose: false })
        .openPopup();

      // let flyEye = mapOptions.scene.center;
      // flyEye.lat = transcoordinates[0][1];
      // flyEye.lng = transcoordinates[0][0];
      // flyEye.alt = 1000;
      // flytoView(map,flyEye);
    }
  });
}

function deleteRow(index) {
  let selectgid = pipLineTableData.value[index].gid;
  ElMessageBox.confirm("是否删除该行数据?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      pipLineTableData.value.splice(index, 1);
      deletePiepleLine([selectgid]).then((res) => {
        if (res.code == 200) {
          ElMessage({
            type: "success",
            message: "删除成功",
          });
          getLineTable();
        }
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
}

function handleClick(row){
  rowinfo.value = row;
  updatepipline.value = true;
}

function closePanl(){
  updatepipline.value = false;
}

getLineTable();
</script>

<style scoped>
.linelist {
  width: 90%;
  height: 30%;
  position: fixed;
  bottom: 5px;
  display: flex;
  flex-direction: column;
}

.table {
  width: 100%;
  height: 70%;
  background-color: aliceblue;
}

.search {
  height: 30%;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  background-color: aliceblue;
  opacity: 80%;
}

.search div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 10%;
}

.paginationContainer {
  display: flex;
  padding-top: 8px;
  justify-content: right;
  border-top: 1px solid #ccc;
}
</style>
